import {createRouter,createWebHashHistory} from 'vue-router'
import store from '@/store'
import { menuTree } from '@/apis/personal' 
// 1. 引入页面
// const Home = ()=> import("@/views/Home.vue")
import Layout from '@/layout/Index.vue'

//个人中心
const Login = ()=>import("@/views/login/Index.vue")
const PersonalIndex = ()=>import("@/views/personal/Index.vue")
const PersonalMessage = ()=>import("@/views/personal/Message/Index.vue")
const PersonalProfile = ()=>import("@/views/personal/Profile.vue")
const PersonalChangepsw = ()=>import("@/views/personal/ChangePsw.vue")
// const AppIndex = ()=>import("@/views/app/Index.vue")

//应用管理
const AppDept = ()=>import("@/views/app/Dept.vue")
const AppResource = ()=>import("@/views/app/Resource.vue")
const AppRole = ()=>import("@/views/app/Role.vue")
const AppUser = () => import('@/views/app/User.vue')

//系统管理
const SysUser = ()=>import("@/views/sys/User.vue")
const SysNotice = ()=>import("@/views/sys/Notice.vue")

//审计管理
const LogsVisit = ()=>import("@/views/logs/Visit.vue")
const LogsOperation = ()=>import("@/views/logs/Operation.vue")


const NotFound = ()=> import("@/views/404.vue")

// 2. 路由配置
const routesConfig = [
   
    {
        path:'/',
        name:'Home',
        component: Layout,
        children:[
            // 登录页
            {
                path:'login',
                name:'Login',
                component: Login
            },
            // 个人中心页
            {
                path:'personal',
                name:'Personal',
                meta: {
                    requireAuth:true,
                },
                component:PersonalIndex,
                redirect: "/personal/profile",
                children:[
                    {
                        path:"profile",
                        name: "PersonalProfile",
                        meta: {
                            requireAuth:true,
                        },
                        component:PersonalProfile
                    },
                    {
                        path:"changepsw",
                        name: "PersonalChangepsw",
                        meta: {
                            requireAuth:true,
                        },
                        component:PersonalChangepsw
                    },
                    {
                        path:'message',
                        name:'PersonalMessage',
                        meta: {
                            requireAuth:true,
                        },
                        component: PersonalMessage
                    }
                ]
            },
            //应用管理路由
    {
        path:'app',
        name:'App',
        children:[
            {
                path:'user',
                name:'AppUser',
                component: AppUser
            },
            {
                path:'dept',
                name:'AppDept',
                component: AppDept
            },
            {
                path:'role',
                name:'AppRole',
                component: AppRole
            },
            {
                path:'resource',
                name:'AppResource',
                component: AppResource
            },
        ]
    },
    //系统管理路由
    {
        path:'sys',
        name:'Sys',
        children:[
            {
                path:'user',
                name:'SysUser',
                component: SysUser
            },
            {
                path:'notice',
                name:'SysNotice',
                component: SysNotice
            },
           
        ]
    },
     //审计管理路由
     {
        path:'logs',
        name:'Logs',
        children:[
            {
                path:'visit',
                name:'LogsVisit',
                component: LogsVisit
            },
            {
                path:'operation',
                name:'LogsOperation',
                component: LogsOperation
            },
           
        ]
    },
            // App内部页
            // {
            //     path:'app',
            //     name:'App',
            //     component: AppIndex
            // },
            // 404
            {
                path:'404',
                name:'NotFound',
                component: NotFound
            }
        ]
    },
    
    {
        path:'/:pathMatch(.*)*',
        name:'404',
        redirect:'/404'
    }
]

// 3. 路由初始化
const router = createRouter({
    // 表示使用什么路由
    history: createWebHashHistory(),
    // 表示 路由的配置
    routes: routesConfig
})

/**
 * 1. 如果是去登录页且已经登录，则直接跳转第一个导航
 * 2. 如果是首页，则直接跳转到第一个导航
 */

// 路由拦截守卫
router.beforeEach(async (to) => {

    // 判断是否登录
    const isLogin = store.getters['user/isLogin']

    // 如果是去登录页且已经登录，则直接跳转第一个导航
    if (to.path === '/login') {
        if (isLogin) {
            console.log(store.state.firstRoute);
            return store.state.firstRoute
        }
        return true
    }

    // 判断菜单是否加载
    if (store.state.routeLoaded) {
        return true
    }

    // 菜单的初始化
    await initMenu()
    // 获取菜单之后，跳转第一个路由
    const { state: { firstRoute } } = store
    // 如果是首页，则直接跳转到第一个导航
    if (to.path === '/' && firstRoute) {
        return firstRoute
    }
    return true
})

// 请求菜单
function initMenu() {
    return menuTree()
        .then((res) => {
            const { data } = res
            // console.log('data', data);

            // 菜单/路由已经加载
            store.commit('setRouteLoaded', true)
            // 菜单
            store.commit('setMenuTree', data)
            // 默认打开的第一个路由
            store.commit('setFirstRoute', data[0].children[0].path)
        })
}
// 4. 对外暴露出路由实例
export default router